<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/session.jsp"%>
<c:set var="categoryId" value="${param.categoryId}" />
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="${ctx}/css/default.css"/>
    <script type="text/javascript" src="${ctx}/js/xtable.js"></script>
    <script type="text/javascript" src="${ctx}/js/calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/CategoryService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/PaperService.js'></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
</head>
<body onload="selectCategory()">
<table width="100%">
    <tr>
        <td width="50%" valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var paperThead = new Array(
                    new XThead("选择", "radio"),
                    new XThead("报纸名称"),
                    new XThead("报纸封面")
                );

                var paperXTable = new XTable("paper", paperThead, true);

                paperXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("paper", model.paperId, "radio", "onclick='setPaper(this)'", model),
                        new XTbody("paper", model.paperTitle),
                        new XTbody("paper", "<a href='" + model.paperUrl + "' target='_blank'><img width=50 height=60 style='border:1px solid #c9c9c9' onerror='' src='" + model.paperCover + "'/></a>", "string", null, null, "center")
                    );
                    return array;
                }

                paperXTable.getXList = function (page){
                    var paper = dwr.util.getValues("paperForm");
                    PaperService.selectPaperList(paper, function(list){paperXTable.addTable(list);});
                }

                function selectPaperPage(){
                    paperXTable.goPage(1);
                }
            </SCRIPT>
        </td>
        <td width="50%" valign="top">
            <form id="paperForm" name="paperForm" onsubmit="return submitPaper();">
                <input type="text" id="paperId" name="paperId" value="" style="display: none">
                <input type="hidden" id="paperCover" name="paperCover">
                <table width="100%" height="100%" cellspacing="5" cellpadding="5">
                    <tr>
                        <td>
                            <input type="file" id="paperCoverFile" name="paperCoverFile" style="display: none;" placeholder="报纸封面" accept="image/jpeg" onchange="$('paperCoverButton').innerText=this.value;"/>
                            <button type="button" id="paperCoverButton" name="paperCoverButton" style="width: 100%" onclick="document.paperForm.paperCoverFile.click()">上传报纸封面</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="paperTitle" name="paperTitle" maxlength="50" placeholder="报纸名称" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="paperAuthor" name="paperAuthor" maxlength="50" placeholder="报纸作者"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="paperUrl" name="paperUrl" maxlength="200" placeholder="报纸URL"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="categoryId" name="categoryId" required>
                                <option value="">请选择类别</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <button type="button" onclick="selectPaperPage()">查询</button>
                            <button type="button" onclick="insertPaper()">新增</button>
                            <button type="button" onclick="updatePaper()">修改</button>
                            <button type="button" onclick="deletePaper()">删除</button>
                            <button type="reset">清空</button>
                            <button type="submit" id="submitPaperButton" style="visibility: hidden"></button>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>
</body>
</html>
<script>
    function selectCategory() {
        var category = new Category();
        category.categoryParentId = 20;
        CategoryService.selectCategoryList(category, function(list){
            dwr.util.addOptions("categoryId", list, "categoryId", "categoryName");
            dwr.util.setValue("categoryId", "${categoryId}");
            selectPaperPage();
        });
    }

    function setPaper(obj) {
        var paper = obj.parentElement.parentElement.model;
        dwr.util.setValues(paper);
    }

    function submitPaper() {
        var paperId = dwr.util.getValue("paperId");
        var confirmMsg = paperId ? "确定修改报纸" : "确定新增报纸";
        if (confirm(confirmMsg)) {
            var paper = dwr.util.getValues("paperForm");
            var paperCoverValue = document.getElementById("paperCoverFile").value;
            var paperCoverFile = paperCoverValue == "" ? null : dwr.util.getValue("paperCoverFile");
            if (paperId) {
                PaperService.updatePaper(paper, paperCoverFile, selectPaperPage);
            } else {
                if (paperCoverValue == "") {
                    alert("请添加报纸封面")
                    return false;
                }
                PaperService.insertPaper(paper, paperCoverFile, selectPaperPage);
            }
        }
        return false;
    }

    function insertPaper() {
        dwr.util.setValue("paperId", "");
        $("submitPaperButton").click();
    }

    function updatePaper() {
        var paperId = dwr.util.getValue("paperId");
        if (!paperId) {
            alert("请选择要修改的报纸");
            return false;
        }
        $("submitPaperButton").click();
    }
    
    function deletePaper() {
        var paperId = dwr.util.getValue("paperId");
        if (!paperId) {
            alert("请选择要删除的报纸");
            return false;
        }
        if (confirm("确定删除报纸")) {
            var paper = dwr.util.getValues("paperForm");
            PaperService.deletePaper(paper, selectPaperPage);
        }
    }
</script>
